<script setup lang="ts">
import CopyOutlined from "@ant-design/icons-vue/CopyOutlined";
import FormOutlined from "@ant-design/icons-vue/FormOutlined";
import AimOutlined from "@ant-design/icons-vue/AimOutlined";
import {message} from "ant-design-vue";
import BatchSelection from "~/contentScripts/views/wxt/components/BatchSelection.vue";
import DateRangeSelection from "~/contentScripts/views/wxt/components/DateRangeSelection.vue";
import RefreshButton from "~/contentScripts/views/wxt/components/RefreshButton.vue";
import BookOutlined from "@ant-design/icons-vue/BookOutlined";
// 关键词优化
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import AdjustBid
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/KeywordsOptimizationContent/AdjustBid.vue";
import DeleteKeywords
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/KeywordsOptimizationContent/DeleteKeywords.vue";
import GrabBatch
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/KeywordsOptimizationContent/GrabBatch.vue";
import GrabSeat
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/KeywordsOptimizationContent/GrabSeat.vue";
import {digitFormat} from "~/utils/util";

const title = '关键词优化';
const props = defineProps({
  campaignIds: {
    type: Array,
    default: () => []
  },
  rows: {
    type: Array,
    default: () => []
  },
  adgroupIds: {
    type: Array,
    default: () => [],
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
});
const units = ref<any[]>([]);
const loading = ref(false);
const dateRange = ref<any[]>([]);
const loadUnits = () => {
  if (dateRange.value.length !== 2) {
    return;
  }
  if (loading.value) {
    return;
  }
  loading.value = true;
  units.value = [];
  let campaignIds = Array.from(new Set(props.campaignIds.map((campaignId: any) => campaignId)));
  // 从props.rows中获取campaignId并取唯一值
  if (campaignIds.length === 0) {
    campaignIds = Array.from(new Set(props.rows.map((item: any) => item.campaignId)));
  }
  // 从props.rows中获取adgroupId并取唯一值
  let adgroupIds = Array.from(new Set(props.adgroupIds.map((adgroupId: any) => adgroupId)));
  if (adgroupIds.length === 0) {
    adgroupIds = Array.from(new Set(props.rows.map((item: any) => item.adgroupId)));
  }
  adgroupIds.forEach((adgroupId: any, index: number) => {
    WxtUtils.customRequest('https://one.alimama.com/adgroup/get.json', props.bizCode, {
      adgroupId: adgroupId,
    }).then(res => {
      units.value.push(res.data.data.adgroup);
      if (index === adgroupIds.length - 1) {
        loading.value = false;
        // 词包
        WxtUtils.customRequest('https://one.alimama.com/wordpackage/findList.json', props.bizCode, {
          campaignIdList: campaignIds,
          adgroupIdList: adgroupIds,
        }).then(res => {
          res.data.data.list.map((l: any) => {
            units.value.map((u: any) => {
              if (typeof u.wordPackage === 'undefined') {
                u.wordPackage = [];
              }
              if (l.adgroupId === u.adgroupId) {
                u.wordPackage.push(l);
              }
            });
          });
          calcUnits();
        });
        // 关键词
        WxtUtils.customRequest('https://one.alimama.com/bidword/findList.json', props.bizCode, {
          campaignIdList: campaignIds,
          adgroupIdList: adgroupIds,
          rptQuery: {
            "fields": "adPv,click,charge,ctr,ecpc,ecpm,gmvInshopNum,gmvInshopAmt,prepayInshopAmt,prepayInshopNum,prepayDirAmt,prepayDirNum,prepayIndirAmt,prepayIndirNum,alipayDirAmt,alipayIndirAmt,alipayInshopAmt,alipayInshopNum,alipayDirNum,alipayIndirNum,cvr,roi,dirRoi,alipayInshopCost,cartInshopNum,cartDirNum,cartIndirNum,cartRate,itemColInshopNum,shopColDirNum,shopColInshopCost,colCartNum,colCartCost,itemColCart,itemColCartCost,colNum,itemColInshopCost,itemColInshopRate,cartCost,itemColDirNum,itemColIndirNum,couponShopNum,shoppingNum,shoppingAmt,wwNum,wwNumCost",
            "conditionList": [
              {
                "adzonePkgIdList": adZonePkgIdList.value,
                "startTime": dateRange.value[0].format('YYYY-MM-DD'),
                "endTime": dateRange.value[1].format('YYYY-MM-DD'),
                "isRt": false,
                "sourceList": [
                  "adgroup_detail",
                  "bidword_list"
                ]
              }
            ]
          },
        }).then(res => {
          res.data.data.list.map((l: any) => {
            units.value.map((u: any) => {
              if (typeof u.bidWord === 'undefined') {
                u.bidWord = [];
              }
              if (l.adgroupId === u.adgroupId) {
                u.bidWord.push(l);
              }
            });
            calcUnits();
          });
        });
      }
    });
  });
}
loadUnits();
watch(() => dateRange.value, (val) => {
  if (val.length === 2) {
    loadUnits();
  }
}, {
  deep: true
});
watch(() => props.campaignIds, (val) => {
  if (val.length) {
    loadUnits();
  }
}, {
  deep: true
});
watch(() => props.adgroupIds, (val) => {
  if (val.length) {
    loadUnits();
  }
}, {
  deep: true
});
watch(() => props.rows, (val) => {
  if (val.length) {
    loadUnits();
  }
}, {
  deep: true
});
watch(() => props.bizCode, (val) => {
  if (val) {
    loadUnits();
  }
});
const adZonePkgIdList = ref<any[]>([]);
const selectedRows = ref<any[]>([]);
const dataSource = ref<any[]>([]);
const calcDataSource = (units: any[]) => {
  let data: any[] = [];
  units.map((unit: any) => {
    if (unit.wordPackage) {
      unit.wordPackage.map((wordPackage: any) => {
        if (wordPackage.wordPackageId === 0) {
          data.push({
            id: 'zxmain-' + wordPackage.wordPackageId,
            name: wordPackage.wordPackageName,
            wordPackageId: wordPackage.wordPackageId,
            adgroupId: unit.adgroupId,
            campaignId: unit.campaignId,
            type: 'zxmain',
            reportInfoList: wordPackage.reportInfoList,
            status: wordPackage.status,
            adgroupName: unit.adgroupName,
            campaignName: unit.campaignName,
            material: unit.material,
            bidPrice: wordPackage.bidPrice,
            wordPackageType: wordPackage.wordPackageType,
            wordPackageName: wordPackage.wordPackageName,
          });
          wordPackage.strategyList.map((strategy: any) => {
            data.push({
              id: 'zxsub-' + strategy.strategyId,
              name: strategy.strategyName,
              wordPackageId: strategy.strategyId,
              adgroupId: unit.adgroupId,
              campaignId: unit.campaignId,
              type: 'zxsub',
              reportInfoList: strategy.reportInfoList,
              status: strategy.onlineStatus,
              adgroupName: unit.adgroupName,
              campaignName: unit.campaignName,
              material: unit.material,
              bidPrice: strategy.bidPrice,
              strategyId: strategy.strategyId,
              wordPackageType: strategy.wordPackageType,
              wordPackageName: wordPackage.wordPackageName,
            });
          });
        } else {
          data.push({
            id: 'zb-' + wordPackage.wordPackageId,
            name: wordPackage.wordPackageName,
            wordPackageId: wordPackage.wordPackageId,
            adgroupId: unit.adgroupId,
            campaignId: unit.campaignId,
            type: 'zb',
            reportInfoList: wordPackage.reportInfoList,
            status: wordPackage.status,
            adgroupName: unit.adgroupName,
            campaignName: unit.campaignName,
            material: unit.material,
            bidPrice: wordPackage.bidPrice,
            wordPackageType: wordPackage.wordPackageType,
            wordPackageName: wordPackage.wordPackageName,
          });
        }
      });
    }
    if (unit.bidWord) {
      unit.bidWord.map((bidWord: any) => {
        data.push({
          id: bidWord.bidwordId,
          name: bidWord.word,
          adgroupId: unit.adgroupId,
          campaignId: unit.campaignId,
          type: 'kw',
          reportInfoList: bidWord.reportInfoList,
          status: bidWord.status,
          adgroupName: unit.adgroupName,
          campaignName: unit.campaignName,
          material: unit.material,
          matchScope: bidWord.matchScope,
          tags: bidWord.tags,
          bidPrice: bidWord.bidPrice,
          bidwordId: bidWord.bidwordId,
          bidStrategyInfo: bidWord.bidStrategyInfo,
        });
      });
    }
  });
  data.map((keyword: any) => {
    if (keyword.reportInfoList) {
      // 间接ROI
      keyword.reportInfoList[0].indirRoi = keyword.reportInfoList[0].roi - keyword.reportInfoList[0].dirRoi;
      // 直接转化率
      keyword.reportInfoList[0].dirCvr = keyword.reportInfoList[0].alipayDirNum / keyword.reportInfoList[0].click;
      // 间接转化率
      keyword.reportInfoList[0].indirCvr = keyword.reportInfoList[0].alipayIndirNum / keyword.reportInfoList[0].click;

      // 直接加购率
      keyword.reportInfoList[0].dirAddRate = keyword.reportInfoList[0].cartDirNum / keyword.reportInfoList[0].click;
      // 间接加购率
      keyword.reportInfoList[0].indirAddRate = keyword.reportInfoList[0].cartIndirNum / keyword.reportInfoList[0].click;

      // 直接收藏率
      keyword.reportInfoList[0].dirFavRate = keyword.reportInfoList[0].itemColDirNum / keyword.reportInfoList[0].click;
      // 间接收藏率
      keyword.reportInfoList[0].indirFavRate = keyword.reportInfoList[0].itemColIndirNum / keyword.reportInfoList[0].click;
      //  直接收藏加购率
      keyword.reportInfoList[0].dirFavAddRate = keyword.reportInfoList[0].dirFavRate + keyword.reportInfoList[0].dirAddRate;
      // 间接收藏加购率
      keyword.reportInfoList[0].indirFavRate = keyword.reportInfoList[0].indirFavRate + keyword.reportInfoList[0].indirAddRate;
      // 从areaCode中找到对应的省份
      // plan.launchAreaStrList = plan.launchAreaStrList.map((id: string) => id === '575' ? '574' : id);
    }
  });
  // console.log('data', data);
  return data;
}
const calcUnits = () => {
  dataSource.value = calcDataSource(units.value);
}
const columns = [
  {
    title: '匹配范围',
    dataIndex: 'matchScope',
    width: 100,
    dataType: 'custom',
    slot: 'matchScope',
    render: (text: any, record: any, index: number) => {
      if (record.type === 'kw') {
        if (record.matchScope == 4) {
          return '广泛';
        } else if (record.matchScope == 1) {
          return '精确';
        } else {
          return '-';
        }
      } else {
        return '-';
      }
    },
    fixed: 'left',
  },
  {
    title: '标签',
    dataIndex: 'tags',
    width: 100,
    fixed: 'left',
    dataType: 'custom',
    slot: 'tags',
    render: (text: any, record: any, index: number) => {
      if (record.type === 'kw') {
        if (record.tags) {
          return record.tags.map((tag: any) => {
            return tag.tagName;
          }).join(',');
        } else {
          return '-';
        }
      } else {
        return '-';
      }
    }
  },
  {
    title: '关键词',
    dataIndex: 'name',
    width: 100,
    fixed: 'left',
    sorter: (a: any, b: any) => a.name.localeCompare(b.name),
  },
  {
    title: '关键词类型',
    dataIndex: 'type',
    width: 100,
    fixed: 'left',
    dataType: 'customRender',
    render: (text: any, record: any, index: number) => {
      if (text === 'kw') {
        return '关键词';
      } else if (text === 'zb') {
        return '词包';
      } else if (text === 'zxmain') {
        return '流量智选';
      } else if (text === 'zxsub') {
        return '流量智选';
      } else {
        return '-';
      }
    }
  },
  {
    title: '所属单元',
    dataIndex: 'adgroupName',
    width: 240,
    // fixed: 'left',
    dataType: 'custom',
    slot: 'adgroupName',
  },
  {
    title: '所属计划',
    dataIndex: 'campaignName',
    width: 160,
    // fixed: 'left',
  },

  {
    title: '出价',
    dataIndex: 'bidPrice',
    width: 100,
    // fixed: 'left',
    sorter: (a: any, b: any) => a.bidPrice - b.bidPrice,
    dataType: 'custom',
    slot: 'bidPrice',
  },
  {
    title: '展现量',
    dataIndex: 'reportInfoList.adPv',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].adPv || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].adPv || 0) - (b.reportInfoList[0].adPv || 0);
    },
  },
  {
    title: '点击量',
    dataIndex: 'reportInfoList.click',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].click || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].click || 0) - (b.reportInfoList[0].click || 0);
    },
  },
  {
    title: '花费',
    dataIndex: 'reportInfoList.charge',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].charge || 0;
        // 每隔三位逗号分隔
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].charge || 0) - (b.reportInfoList[0].charge || 0);
    },
  },
  {
    title: '点击率',
    dataIndex: 'reportInfoList.ctr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ctr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ctr || 0) - (b.reportInfoList[0].ctr || 0);
    },
  },
  {
    title: '平均点击花费',
    dataIndex: 'reportInfoList.ecpc',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ecpc || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpc || 0) - (b.reportInfoList[0].ecpc || 0);
    },
  },
  {
    title: '千次展现花费',
    dataIndex: 'reportInfoList.ecpm',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].ecpm || 0;
        return digitFormat((value).toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].ecpm || 0) - (b.reportInfoList[0].ecpm || 0);
    },
  },
  {
    title: '拍下订单笔数',
    dataIndex: 'reportInfoList.gmvInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].gmvInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopNum || 0) - (b.reportInfoList[0].gmvInshopNum || 0);
    },
  },
  {
    title: '拍下订单金额',
    dataIndex: 'reportInfoList.gmvInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].gmvInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].gmvInshopAmt || 0) - (b.reportInfoList[0].gmvInshopAmt || 0);
    },
  },
  {
    title: '预售成交笔数',
    dataIndex: 'reportInfoList.prepayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopNum || 0) - (b.reportInfoList[0].prepayInshopNum || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayInshopAmt || 0) - (b.reportInfoList[0].prepayInshopAmt || 0);
    },
  },
  {
    title: '预售成交金额',
    dataIndex: 'reportInfoList.prepayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayDirAmt || 0) - (b.reportInfoList[0].prepayDirAmt || 0);
    },
  },
  {
    title: '预售间接成交笔数',
    dataIndex: 'reportInfoList.prepayIndirNum',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirNum || 0) - (b.reportInfoList[0].prepayIndirNum || 0);
    },
  },
  {
    title: '预售间接成交金额',
    dataIndex: 'reportInfoList.prepayDirAmt',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].prepayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].prepayIndirAmt || 0) - (b.reportInfoList[0].prepayIndirAmt || 0);
    },
  },
  {
    title: '总成交笔数',
    dataIndex: 'reportInfoList.alipayInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopNum || 0) - (b.reportInfoList[0].alipayInshopNum || 0);
    },
  },
  {
    title: '总成交金额',
    dataIndex: 'reportInfoList.alipayInshopAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopAmt || 0) - (b.reportInfoList[0].alipayInshopAmt || 0);
    },
  },
  {
    title: '直接成交笔数',
    dataIndex: 'reportInfoList.alipayDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirNum || 0) - (b.reportInfoList[0].alipayDirNum || 0);
    },
  },
  {
    title: '直接成交金额',
    dataIndex: 'reportInfoList.alipayDirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayDirAmt || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayDirAmt || 0) - (b.reportInfoList[0].alipayDirAmt || 0);
    },
  },
  {
    title: '间接成交笔数',
    dataIndex: 'reportInfoList.alipayIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirNum || 0) - (b.reportInfoList[0].alipayIndirNum || 0);
    },
  },
  {
    title: '间接成交金额',
    dataIndex: 'reportInfoList.alipayIndirAmt',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayIndirAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayIndirAmt || 0) - (b.reportInfoList[0].alipayIndirAmt || 0);
    },
  },
  {
    title: '点击转化率',
    dataIndex: 'reportInfoList.cvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cvr || 0) - (b.reportInfoList[0].cvr || 0);
    },
  },
  {
    title: '投入产出比',
    dataIndex: 'reportInfoList.roi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].roi || 0;
        return (value).toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].roi || 0) - (b.reportInfoList[0].roi || 0);
    },
  },
  {
    title: '直接成交RIO',
    dataIndex: 'reportInfoList.dirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirRoi || 0;
        return (value).toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirRoi || 0) - (b.reportInfoList[0].dirRoi || 0);
    },
  },
  {
    title: '总成交成本',
    dataIndex: 'reportInfoList.alipayInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].alipayInshopCost || 0;
        return (value).toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].alipayInshopCost || 0) - (b.reportInfoList[0].alipayInshopCost || 0);
    },
  },
  {
    title: '总购物车数',
    dataIndex: 'reportInfoList.cartInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartInshopNum || 0) - (b.reportInfoList[0].cartInshopNum || 0);
    },
  },
  {
    title: '直接购物车数',
    dataIndex: 'reportInfoList.cartDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartDirNum || 0) - (b.reportInfoList[0].cartDirNum || 0);
    },
  },
  {
    title: '间接购物车数',
    dataIndex: 'reportInfoList.cartIndirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartIndirNum || 0) - (b.reportInfoList[0].cartIndirNum || 0);
    },
  },
  {
    title: '加购率',
    dataIndex: 'reportInfoList.cartRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartRate || 0) - (b.reportInfoList[0].cartRate || 0);
    },
  },
  {
    title: '收藏宝贝数',
    dataIndex: 'reportInfoList.itemColInshopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopNum || 0) - (b.reportInfoList[0].itemColInshopNum || 0);
    },
  },
  {
    title: '收藏店铺数',
    dataIndex: 'reportInfoList.shopColDirNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shopColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColDirNum || 0) - (b.reportInfoList[0].shopColDirNum || 0);
    },
  },
  {
    title: '店铺收藏成本',
    dataIndex: 'reportInfoList.shopColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shopColInshopCost || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shopColInshopCost || 0) - (b.reportInfoList[0].shopColInshopCost || 0);
    },
  },
  {
    title: '总收藏加购数',
    dataIndex: 'reportInfoList.colCartNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colCartNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartNum || 0) - (b.reportInfoList[0].colCartNum || 0);
    },
  },
  {
    title: '总收藏加购成本',
    dataIndex: 'reportInfoList.colCartCost',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colCartCost || 0) - (b.reportInfoList[0].colCartCost || 0);
    },
  },
  {
    title: '宝贝收藏加购数',
    dataIndex: 'reportInfoList.itemColCart',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColCart || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCart || 0) - (b.reportInfoList[0].itemColCart || 0);
    },
  },
  {
    title: '宝贝收藏加购成本',
    dataIndex: 'reportInfoList.itemColCartCost',
    width: 140,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColCartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColCartCost || 0) - (b.reportInfoList[0].itemColCartCost || 0);
    },
  },
  {
    title: '总收藏数',
    dataIndex: 'reportInfoList.colNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].colNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].colNum || 0) - (b.reportInfoList[0].colNum || 0);
    },
  },
  {
    title: '宝贝收藏成本',
    dataIndex: 'reportInfoList.itemColInshopCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopCost || 0) - (b.reportInfoList[0].itemColInshopCost || 0);
    },
  },
  {
    title: '宝贝收藏率',
    dataIndex: 'reportInfoList.itemColInshopRate',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColInshopRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColInshopRate || 0) - (b.reportInfoList[0].itemColInshopRate || 0);
    },
  },
  {
    title: '加购成本',
    dataIndex: 'reportInfoList.cartCost',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].cartCost || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].cartCost || 0) - (b.reportInfoList[0].cartCost || 0);
    },
  },
  {
    title: '直接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColDirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColDirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColDirNum || 0) - (b.reportInfoList[0].itemColDirNum || 0);
    },
  },
  {
    title: '间接收藏宝贝数',
    dataIndex: 'reportInfoList.itemColIndirNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].itemColIndirNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].itemColIndirNum || 0) - (b.reportInfoList[0].itemColIndirNum || 0);
    },
  },
  {
    title: '优惠劵领取量',
    dataIndex: 'reportInfoList.couponShopNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].couponShopNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].couponShopNum || 0) - (b.reportInfoList[0].couponShopNum || 0);
    },
  },
  {
    title: '购物金充值笔数',
    dataIndex: 'reportInfoList.shoppingNum',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shoppingNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingNum || 0) - (b.reportInfoList[0].shoppingNum || 0);
    },
  },
  {
    title: '购物金充值金额',
    dataIndex: 'reportInfoList.shoppingAmt',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].shoppingAmt || 0;
        return digitFormat(value.toFixed(2));
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].shoppingAmt || 0) - (b.reportInfoList[0].shoppingAmt || 0);
    },
  },
  {
    title: '旺旺咨询量',
    dataIndex: 'reportInfoList.wwNum',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].wwNum || 0;
        return digitFormat(value);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].wwNum || 0) - (b.reportInfoList[0].wwNum || 0);
    },
  },
  {
    title: '间接成交ROI',
    dataIndex: 'reportInfoList.indirRoi',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirRoi || 0;
        return value.toFixed(2);
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirRoi || 0) - (b.reportInfoList[0].indirRoi || 0);
    },
  },
  {
    title: '直接转化率',
    dataIndex: 'reportInfoList.dirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirCvr || 0) - (b.reportInfoList[0].dirCvr || 0);
    },
  },
  {
    title: '间接转化率',
    dataIndex: 'reportInfoList.indirCvr',
    width: 100,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirCvr || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirCvr || 0) - (b.reportInfoList[0].indirCvr || 0);
    },
  },
  {
    title: '直接收藏加购率',
    dataIndex: 'reportInfoList.dirFavAddRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].dirFavAddRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].dirFavAddRate || 0) - (b.reportInfoList[0].dirFavAddRate || 0);
    },
  },
  {
    title: '间接收藏加购率',
    dataIndex: 'reportInfoList.indirFavRate',
    width: 120,
    dataType: 'customRender',
    align: 'right',
    render: (text: any, record: any) => {
      if (!record.reportInfoList) {
        return '-';
      } else {
        const value = record.reportInfoList[0].indirFavRate || 0;
        return (value * 100).toFixed(2) + '%';
      }
    },
    sorter(a: any, b: any) {
      if (!a.reportInfoList) {
        return -1;
      }
      if (!b.reportInfoList) {
        return 1;
      }
      return (a.reportInfoList[0].indirFavRate || 0) - (b.reportInfoList[0].indirFavRate || 0);
    },
  },
];
const copy = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  });
}
const Zxtf = (row: any) => {
  let status = 1;
  if (row.type === 'zxmain') {
    if (row.status == 1) {
      row.status = 0;
      status = 0;
    } else {
      row.status = 1;
      status = 1;
    }
  }
  const wordPackageList = [];
  const unit = units.value.find((unit: any) => unit.adgroupId === row.adgroupId);
  if (unit.wordPackage) {
    const zx = unit.wordPackage.find((wordPackage: any) => wordPackage.wordPackageId === 0);
    zx.status = status;
    zx.onlineStatus = status;
    zx.strategyList.map((strategy: any) => {
      strategy.status = status;
      strategy.onlineStatus = status;
    });
    calcUnits();
    wordPackageList.push(zx);
    WxtUtils.customRequest('https://one.alimama.com/wordpackage/update.json', props.bizCode, {
      wordPackageList: wordPackageList
    }).then((res: any) => {
      message.success('操作成功');
    });
  } else {
    message.error('流量智选单元不存在');
  }
}
const changeMatchScope = (rows: any[], status: undefined | number = undefined) => {
  const bidwordList: any[] = [];
  let matchScope = 1;
  rows.forEach((row: any) => {
    if (row.type === 'kw') {
      if (typeof status !== 'undefined') {
        row.matchScope = status;
        matchScope = status;
      } else {
        if (row.matchScope == 4) {
          row.matchScope = 1;
          matchScope = 1;
        } else if (row.matchScope == 1) {
          row.matchScope = 4;
          matchScope = 4;
        }
      }
      bidwordList.push({
        adgroupId: row.adgroupId,
        bidwordId: row.bidwordId,
        campaignId: row.campaignId,
        matchScope: matchScope,
      });
      // 修改dataSource中的数据
      dataSource.value.forEach((item: any) => {
        if (item.bidwordId === row.bidwordId) {
          item.matchScope = matchScope;
        }
      });
    }
  });
  if (bidwordList.length > 0) {
    WxtUtils.customRequest('https://one.alimama.com/bidword/update.json', props.bizCode, {
      bidwordList: bidwordList
    }).then((res: any) => {
      message.success('操作成功');
    });
  } else {
    message.error('没有需要修改的数据');
  }
}
const bidWordTagUpdate = (bidwordList: any[], type = 'add') => {
  WxtUtils.customRequest('https://one.alimama.com/bidword/tag/update.json', props.bizCode, {
    bidwordList: bidwordList,
    updateType: type,
  }).then((res: any) => {
    message.success('操作成功');
    loadUnits();
  });
}
const BatchModifyStatus = (e: any) => {
  const status = e.key;
  changeMatchScope(selectedRows.value, status);
}
</script>

<template>
  <a-row style="padding-bottom: 10px;">
    <a-col>
      <a-space>
        <BatchSelection :items="WxtUtils.adZonePkgIdList" name="流量来源" v-model:value="adZonePkgIdList" confirm/>
        <date-range-selection v-model:value="dateRange" :has-today="false"/>
        <RefreshButton :loading="loading" @refresh="loadUnits"/>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="BatchModifyStatus">
              <a-menu-item :key="1">
                精确
              </a-menu-item>
              <a-menu-item :key="4">
                广泛
              </a-menu-item>
            </a-menu>
          </template>
          <a-button size="small" type="primary" ghost>
            匹配范围
          </a-button>
        </a-dropdown>
        <GrabBatch :rows="selectedRows" @refresh="loadUnits" :biz-code="bizCode"/>
        <AdjustBid :keywords="selectedRows" @refresh="loadUnits" :biz-code="bizCode"/>
        <DeleteKeywords :keywords="selectedRows" @refresh="loadUnits" :biz-code="bizCode"/>
      </a-space>
    </a-col>
  </a-row>
  <base-table v-model:selected-rows="selectedRows" row-key="id" :data-source="dataSource" :columns="columns"
              :title="title" pagination
  >
    <template #tags="row">
      <a-space v-if="row.type=='kw'">
        <a-tooltip title="核心">
          <BookOutlined :style="{
            color: row.tags.map(t=>t.tagId).includes(1)?'#1677ff':'#999',
          }"
                        @click="()=>{
                          bidWordTagUpdate([{
                            adgroupId:row.adgroupId+'',
                            bidwordId:row.bidwordId,
                            campaignId:row.campaignId+'',
                            tagList:[{tagId: 1, tagName: '核心'}]
                          }],row.tags.map(t=>t.tagId).includes(1)?'del':'add')
                        }"
          />

        </a-tooltip>
        <a-tooltip title="优化">
          <BookOutlined :style="{
            color: row.tags.map(t=>t.tagId).includes(2)?'#f69502':'#999',
          }"
                        @click="()=>{
                          bidWordTagUpdate([{
                            adgroupId:row.adgroupId+'',
                            bidwordId:row.bidwordId,
                            campaignId:row.campaignId+'',
                            tagList:[{tagId: 2, tagName: '优化'}]
                          }],row.tags.map(t=>t.tagId).includes(2)?'del':'add')
                        }"
          />
        </a-tooltip>
        <a-tooltip title="重点">
          <BookOutlined :style="{
            color: row.tags.map(t=>t.tagId).includes(3)?'#ff4d4f':'#999',
          }"
                        @click="()=>{
                          bidWordTagUpdate([{
                            adgroupId:row.adgroupId+'',
                            bidwordId:row.bidwordId,
                            campaignId:row.campaignId+'',
                            tagList:[{tagId: 3, tagName: '重点'}]
                          }],row.tags.map(t=>t.tagId).includes(3)?'del':'add')
                        }"
          />
        </a-tooltip>
      </a-space>
      <a-switch v-else-if="row.type=='zxmain'" :checked="row.status==1" checked-children="投放中"
                un-checked-children="未开启" @change="Zxtf(row)"
      />
      <a-switch v-else-if="row.type=='zxsub'" :checked="row.status==1" checked-children="投放中"
                un-checked-children="未开启" disabled
      />
      <span v-else>-</span>
    </template>
    <template #matchScope="row">
      <span v-if="row.type=='kw'">
        <a-switch :checked="row.matchScope==1" checked-children="精确" un-checked-children="广泛"
                  @change="changeMatchScope([row])"
        />
      </span>
      <span v-else>-</span>
    </template>
    <template #adgroupName="row">
      <a-row type="flex" class="adgroupName" :gutter="5">
        <a-col>
          <a-popover placement="right">
            <template #content>
              <img :src="row.material.imageUrl"
                   style="width: 200px;height: 200px;"
              />
            </template>
            <img :src="row.material.imageUrl"
                 style="width: 60px;height: 60px;border-radius: 5px;"
            />
          </a-popover>
        </a-col>
        <a-col flex="1" class="title">
          <a-tooltip :title="row.adgroupName">
              <span style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;"
              >{{ row.adgroupName }}</span>
          </a-tooltip>
          <div>
            <a-space>
              <span style="color: #666;">ID: {{ row.adgroupId }}</span>
              <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;"
                            @click="copy(row.adgroupId)"
              />
            </a-space>
          </div>
        </a-col>
      </a-row>
    </template>
    <template #bidPrice="row">
      <a-space>
        {{ row.bidPrice || '--' }}
        <AdjustBid v-if="row.type!='zxmain'" :keywords="[row]" @refresh="loadUnits" :biz-code="bizCode">
          <FormOutlined style="color: #1677ff;cursor: pointer;"/>
        </AdjustBid>
        <GrabSeat v-if="row.bidStrategyInfo" :rows="[row]" @refresh="loadUnits" :biz-code="bizCode">
          <a-popover>
            <template #title>
              <a-space><span>当前正在</span><span style="color: #1677ff"
              >{{ row.bidStrategyInfo.status == 1 ? '抢位中' : '暂停中' }}</span></a-space>
              <br>
              <a-space>
                <span style="color: #1677ff"
                >[抢{{row.bidStrategyInfo.rankName}}]</span>-
                <span>抢位溢价</span>
                <span style="color: #1677ff">
                  {{ row.bidStrategyInfo.discount }}%
                </span>
              </a-space>
            </template>
            <AimOutlined style="color: #1677ff;cursor: pointer;" :style="{
            color: row.bidStrategyInfo.status == 1 ? '#1677ff' : '#666'
          }"
            />
          </a-popover>
        </GrabSeat>
      </a-space>
    </template>
  </base-table>
</template>

<style scoped>

</style>
